<%= javascript_include_tag "ui/jquery.ui.tabs", "popup"%>
<div id="capaPopUp"></div>
<div id="popUpDiv">
    <div id="capaPng">
		<div id="cerrar">X</div>
        <div id = "capaContent">
			<h2>Personas Disponibles</h2>
            <% form_tag (:controller => "friendships", :action => "create", :method => "post") do%>
				<input type="hidden" name="user_a_id" value ="<%=current_user.id%>" >
				<div id = "personas">
					<%= select_tag(:user_b_id, options_from_collection_for_select(@available_friends,:id,:name)) %>
				</div>
				<input type='submit' value='Agregar'>
			<% end %>
        </div>
    </div>
</div>

	<style type="text/css">
		#datos{
			-moz-border-radius: 10px 10px 10px 10px;
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #99CC00;
			}
	</style>

<%= javascript_include_tag "jquery.pagination"%>

<script type="text/javascript">
    /**
     * Callback function that displays the content.
     *
     * Gets called every time the user clicks on a pagination link.
     *
     * @param {int} page_index New Page index
     * @param {jQuery} jq the container with the pagination links as a jQuery object
     */
    function pageselectCallback(page_index, jq){
        var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
        $('#Searchresult').empty().append(new_content);
        return false;
    }
   
    /** 
     * Initialisation function for pagination
     */
    function initPagination() {
        // count entries inside the hidden content
        var num_entries = jQuery('#hiddenresult div.result').length;
        // Create content inside pagination element
        $("#Pagination").pagination(num_entries, {
            callback: pageselectCallback,
			num_display_entries:6,
			num_edge_entries:1,
            // Calculate the number of items to show dividing the actual number of items by items_per_page
			items_per_page:1
        });
     }
    
    // When document is ready, initialize pagination
    $(document).ready(function(){ 
        initPagination();
    });
</script>


<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	
	$(function() {
		$( "button, input:submit, a", ".demo" ).button();
		$( "a", ".demo" ).click(function() { return true; });
	});
</script>

<div id="user_picture" style="width: 100px;float: left;">
	<%= image_tag(@user.picture, :size => "100x100") %>
</div>
<div id="tabs" style="margin-left:100px;">
	<ul style="height: 34px;">
		<li><a href="#tabs-1">Viajes a los que vas!</a></li>
		<li><a href="#tabs-2">Tus Viajes</a></li>
		<li><a href="#tabs-3">Tus Amigos</a></li>
		<li><a href="#tabs-4">Notificacion de Amistad (<%= @pending_notifications.size%>)</a></li>
		<li><a href="#tabs-5">Viajes Publicos</a></li>
	</ul>
	<div id="tabs-1">
	
	<h2>Viajes a los que vas!</h2>
	<div id="datos" style="width: 90%;"></div>
		<div id="da" style="margin-top:2%;">
		<div id="Pagination"></div>
		<br style="clear:both;" />
		<div id="Searchresult" class="contbox2">
			This content will be replaced when pagination inits.
		</div>

			<div id="hiddenresult" style="display:none;">
				<%contadorPaginacion=0%>
				<%cuentaTotal=0%>
				<%commentMax = 5%>
				<% if @on_trips.count > 0%>		
					<% @on_trips.each do |trip|%>
					<%cuentaTotal= cuentaTotal + 1 %>
						<% if (contadorPaginacion==0) %>
							<div class="result">
						<% end-%>
							<div>
								<a href='/trips/show/<%=trip.id%>'><%= h trip.tri_country+"-"+trip.tri_city+" "+trip.tri_start_date.strftime("%Y") -%></a>
									<% if !isOwner(trip.user_id) %>
										<%= link_to "Salir del Viaje", :controller => "user_trips", :action => "leave_trip", :id => trip.id %>
									<% end -%>
							</div>
									<%contadorPaginacion = contadorPaginacion+1%>
						<% if (contadorPaginacion==commentMax or contadorPaginacion==@on_trips.count or cuentaTotal==@on_trips.count )%>
							</div>
							<%contadorPaginacion=0%>
						<%end-%>
					<% end -%>
				<% end-%>
			</div>
		</div>
		<br><a href="/rest/tripsTraveler/">Tus viajes en Travelernet!</a>
	</div>
	
	<div id="tabs-2">
	<h2>Tus Viajes</h2>
	<div id="datos" style="width: 90%;"></div>
		<div id="da" style="margin-top:2%;">
			<% @trips.each do |trip|%>
					<a href='/trips/show/<%=trip.id%>'><%= h trip.tri_country+"-"+trip.tri_city -%></a><br>
			<% end -%>
			<div class="demo" style="margin-left:738px; width:115px;"><%= link_to "Nuevo Viaje", :controller => "trips", :action => "new" %></div>
		</div>
	</div>
	
	<div id="tabs-3">
		<h2>Tus Amigos</h2>
		<div id="datos" style="width: 90%;"></div>
		<div id="da" style="margin-top:2%;">
			<% @friends.each do |friend| %>
				<li><a href='/users/show/<%=friend.id%>'><%= h friend.name+" "+friend.lastname %></a></li>
			<% end -%>
			<div class="demo" style="margin-left:715px; width:137px;">
				<a id = 'abrirPop' href="javascript:void(0);">Agregar Amigos</a>
			</div>
		</div>
	</div>
	
	<div id="tabs-4">
		<h2>Mis Notificaciones Pendientes</h2>
		<div id="datos" style="width: 90%;"></div>
		<div id="da" style="margin-top:2%;">
			<div id = "notifications">
				<% @pending_notifications.each do |notification| %>
					<div class="demo">
						<%= notification.name+" "+notification.lastname+" " %><%= link_to "Aceptar Amistad", :controller => :friendships, :action => :accept_friend, :id => notification.id %>
						<%= link_to "Rechazar Amistad", :controller => :friendships, :action => :reject_friend, :id => notification.id %>
					</div>
				<% end %>
			</div>
		</div>
	</div>
	
	<div id="tabs-5">
		<h2>Busca Viajes Publicos de Amigos y Otros!</h2>
		<div id="datos" style="width: 90%;"></div>
		<div id="da" style="margin-top:2%;">
			<% form_tag (:controller => "trips", :action => "public_trips", :method => "post") do%>
					<div class="demo">	
						<input class="field text fn" id="location" name="location">
						<input type='submit' value='Buscar'>
					</div>
			<% end %>
		
	</div>
</div>